<template>
    <view class="detail_contain">
        <view class="header border">
            <image :src="headerimgs" class="top_img" />
            <view class="right">
                <view class="top" :class="{
                        red:
                            orderlist.wxStatus == 3 ||
                            (orderlist.wxStatus == 2 &&
                                ['4', '5', '6', '7'].includes(orderlist.status)) ||
                            orderlist.status == 2, //待签收
                        blue: orderlist.wxStatus == 1,
                        yellow: orderlist.wxStatus == 4,
                        deepBlue: orderlist.wxStatus == 5,
                        green: orderlist.wxStatus == 6,
                    }">
                    {{ textstatu }}
                </view>
                <view class="botto">{{ textstatu2 }}</view>
            </view>
        </view>

        <view class="paid border" @click="moneyOpen">
            <view class="box" style="
                          display: flex;justify-content: space-between;align-items: center;">
                <view style="line-height: 112rpx; font-weight: 600; font-size: 28rpx">
                    已支付
                </view>
                <view @click="showDetail"
                    style="color: #0966ff; font-weight: 600; font-size: 28rpx;display: flex;align-items: center;">
                    ￥{{ paid() }}
                    <RectRight style="margin-left: 30rpx;" size="15" />
                </view>
            </view>
        </view>
        <view class="address_info border">
            <view class="box" style="display: flex; justify-content: center; flex-direction: column">
                <view class="second">
                    <view class="second-left">
                        <image src="../../assets/images/我要发货/Ellipse8.png" />
                        <view></view>
                        <image src="../../assets/images/我要发货/Ellipse8(1).png" />
                    </view>
                    <view class="second-rihgt">
                        <view>
                            <view class="data0">
                                {{ orderlist.shipper }}
                                <span>{{ orderlist.shipperMobile }}</span>
                            </view>
                            <view class="data1">{{ orderlist.fromAdd }}</view>
                        </view>
                        <view>
                            <view class="data0">
                                {{ orderlist.receiver }}
                                <span>{{ orderlist.receiverMobile }}</span>
                            </view>
                            <view class="data1">{{ orderlist.toFromAdd }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="three border" v-if="orderlist.receivingTime">
            <image src="../../assets/images/我要发货/24pt@2x.png" />
            <view>上门接货时间</view>
            <!-- 接货时间段 -->
            <view style="margin-left: 100rpx">{{
                dayjs(orderlist.receivingTime).format('YYYY-MM-DD') }}</view>
        </view>

        <view class="goods_info border">
            <view class="box" style="
                          display: flex;
                          justify-content: center;
                          flex-direction: column;
                          padding-bottom: 20rpx;
                        ">
                <view class="head">货物信息</view>
                <view class="head-two">
                    <view>
                        <span>总重量:</span><span>{{ allKg() }}</span><span>kg</span>
                    </view>
                    <view>
                        <span>总件数:</span><span>{{ allNumber() }}</span><span>件</span>
                    </view>
                    <view>
                        <span>总体积:</span><span>{{ allVolume() }}</span><span>m³</span>
                    </view>
                </view>
                <view class="fuzhuang" v-for="(goodsItem, index) in orderlist.goodsInfo" :key="index">
                    <view>{{ goodsItem.goodsType }}</view>
                    <view>
                        {{
                            goodsItem.weigh +
                            "kg," +
                            goodsItem.goodsVolume +
                            "m³," +
                            goodsItem.goodsNumber +
                            "件," +
                            goodsItem.packing
                        }}
                    </view>
                </view>
                <view class="texts">
                    <view>
                        <view style="color: #999999">代收货款：</view>
                        <view style="
                                justify-content: flex-end;
                                margin-right: 30rpx;
                                color: #0966ff;
                              ">
                            ￥{{ orderlist.serveFee }}
                        </view>
                    </view>
                    <view>
                        <view style="color: #999999">承运类型：</view>
                        <view style="justify-content: flex-end">整车</view>
                    </view>
                </view>
                <view class="texts">
                    <view>
                        <view style="color: #999999">保价声明：</view>
                        <view style="justify-content: flex-end; margin-right: 30rpx">
                            ￥{{ orderlist.insuredFee }}
                        </view>
                    </view>
                    <view>
                        <view style="color: #999999">包装服务：</view>
                        <view style="justify-content: flex-end">
                            {{ orderlist.isPacking ? "是" : "否" }}
                        </view>
                    </view>
                </view>
                <view class="texts">
                    <view>
                        <view style="color: #999999">付款方式：</view>
                        <view style="justify-content: flex-end; margin-right: 30rpx">
                            现付
                        </view>
                    </view>
                </view>
                <view class="texts">
                    <view style="color: #999999">单据服务：</view>
                    <view style="justify-content: flex-end">
                        {{ billServerFilter(orderlist.billServer) }}
                    </view>
                </view>
            </view>
        </view>
        <view class="border" style="height: auto;background-color: #fff;">
            <view class="box" style="display: flex; justify-content: center; flex-direction: column">
                <view class="head">提货方式</view>
                <view class="woshixian"></view>
                <view class="tihuome">
                    <view class="flex">
                        <span style="color: #999999">提货方式</span><span style="margin-left: 30rpx">{{
                            pickUpModeFilter(orderlist.pickUpMode)
                        }}</span>
                    </view>
                    <view class="flex">
                        <span style="color: #999999">直送服务</span><span style="margin-left: 30rpx">{{
                            deliveryTypeFilter(orderlist.deliveryType)
                        }}</span>
                    </view>
                </view>
                <view class="tihuome">
                    <view class="flex">
                        <span style="color: #999999">卸货类型</span><span style="margin-left: 30rpx">{{
                            dischargeServerFilter(orderlist.dischargeServer)
                        }}</span>
                    </view>
                    <view class="flex">
                        <span style="color: #999999">楼层电梯</span><span style="margin-left: 30rpx">{{
                            orderlist.dischargeElevator ? "全层电梯" : "无电梯"
                        }}</span>
                    </view>
                </view>
                <view class="address">
                    <view class="imgand">
                        <image src="../../assets/images/我要发货/网点图片@3x.png" style="width: 140rpx; height: auto" />
                        <view class="leftimg">
                            <view style="height: 70rpx">
                                <view style="font-size: 35rpx; font-weight: bold">
                                    {{ arrMsg.companyName }}
                                </view>
                                <view style="
                                    line-height: 20rpx;
                                    width: 100%;
                                    white-space: nowrap;
                                    margin-top: 20rpx;
                                    font-size: 20rpx;
                                    color: #999999;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                  ">
                                    地址:{{ arrMsg.address }}
                                </view>
                            </view>
                            <view style="font-size: 20rpx; color: #999999; margin-top: 20rpx">
                                距离收货地{{ (orderlist.sendGoodsMiles * 0.001).toFixed(2) }}km
                            </view>
                        </view>
                    </view>

                    <view class="address-right">
                        <view class="xiushi" style="margin-right: 20rpx" @click="call">
                            <image src="../../assets/images/我要发货/图层1.png" style="width: 50rpx; height:50rpx;" />
                        </view>
                        <view class="xiushi">
                            <image src="../../assets/images/我要发货/icon.png" style="width: 50rpx; height:50rpx;" />
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="border" style="height: auto; padding-top: 0; padding-bottom: 0;background-color: #fff;">
            <view class="box" style="display: flex; justify-content: center; flex-direction: column">
                <view class="head">其他信息</view>
                <view class="woshixian"></view>
                <view class="tihuome">
                    <view class="flex">
                        <span style="color: #999999">提货方式</span><span style="margin-left: 30rpx">{{
                            pickUpModeFilter(orderlist.pickUpMode)
                        }}</span>
                    </view>
                </view>
                <view class="tihuome">
                    <view class="flex">
                        <span style="color: #999999">卸货类型</span><span style="margin-left: 30rpx">{{
                            dischargeServerFilter(orderlist.dischargeServer)
                        }}</span>
                    </view>
                </view>
                <view class="tihuome">
                    <view class="flex">
                        <span style="color: #999999">结算单位</span><span style="margin-left: 30rpx">{{
                            arrMsg.companyName }}</span>
                    </view>
                </view>
            </view>
        </view>
        <view class="border" style="height: auto;background-color: #fff;">
            <view class="box mark" style="display: flex; justify-content: center; flex-direction: column">
                <view class="head">代收货款</view>
                <view class="woshixian" style="margin-top: 0.100rpx"></view>
                <view class="tihuome">
                    <view class="flex">
                        <span style="color: #999999">返还周期</span><span style="margin-left: 30rpx">{{
                            returnCycleFilter(orderlist.returnCycle)
                        }}</span>
                    </view>
                </view>
                <view class="tihuome">
                    <view class="flex">
                        <span style="color: #999999">返还方式</span><span style="margin-left: 30rpx">{{
                            returnTypeFilter(orderlist.returnType)
                        }}</span>
                    </view>
                </view>
                <view class="tihuome">
                    <view class="flex">
                        <span style="color: #999999">会员卡号</span><span style="margin-left: 30rpx">{{ orderlist.vipNo
                        }}</span>
                    </view>
                </view>
                <view class="tihuome">
                    <view class="flex">
                        <span style="color: #999999">银行卡号</span><span style="margin-left: 30rpx">{{
                            orderlist.returunAccount
                        }}</span>
                    </view>
                </view>
                <view class="tihuome">
                    <view>
                        <span style="color: #999999">账户名称</span><span style="margin-left: 30rpx">{{
                            orderlist.returunAccountName
                        }}</span>
                    </view>
                </view>
            </view>
        </view>
        <view class="border" style="height: auto;background-color: #fff;">
            <view class="box mark" style="display: flex; justify-content: center; flex-direction: column">
                <view class="head">运单信息</view>
                <view class="woshixian"></view>
                <view class="tihuome">
                    <view class="flex">
                        <span style="color: #999999">承运单号</span><span style="margin-left: 30rpx">{{ orderlist.billNo
                        }}</span>
                        <span class="copy" @click="fuzhiclick(orderlist.billNo)" v-if="orderlist.billNo">复制</span>
                    </view>
                </view>
                <view class="tihuome">
                    <view class="flex">
                        <span style="color: #999999">下单时间</span><span style="margin-left: 30rpx">{{
                            dayjs(orderlist.billingTime).format('YYYY-MM-DD HH:mm:ss')
                        }}</span>
                    </view>
                </view>
            </view>
        </view>
        <view class="footer foot">
            <nut-button type="info" class="bt-long-white" style=" width: 710rpx;
            height: 100rpx;background-color: white;border: 1rpx solid #c4c4c4;color: #fff;"
                @click="Taro.navigateBack()">返回上一页</nut-button>
        </view>
        <CallModal v-if="tel" :visible="visibleTel" :tel="tel" @close="closeModel"></CallModal>
        <DetailModal :isMyShow="visibleMoney" @closeDetailInfo="closeDetailInfo" />
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import useOrderStore from '@/store/order'
import Taro from '@tarojs/taro'
import dayjs from 'dayjs'
import { getCompanyDetail } from '@/@api/order'
import useUserStore from '@/store/user'
import { CompanyInfoType } from '@/type'
import CallModal from '@/components/CallModal/index.vue'
import DetailModal from '@/pages3/pay/detailModal.vue'
import { RectRight } from '@nutui/icons-vue-taro'

const orderStore = useOrderStore()
const userStore = useUserStore()
const isshow = false
const orderlist = ref<any>([])
const visibleTel = ref(false)
const visibleMoney = ref(false)
const tel = ref('')

const arrMsg = ref<CompanyInfoType>({
    address: '',
    point_lng: '',
    point_lat: '',
    tel: '',
    province: '',
    city: '',
    administrativeDivision: '',
    companyName: '',
    manager: '',
    note: '',
    localX: '',
    localY: '',
})
const headerimg = {
    one: require("../../assets/images/icon_待支付@2x.png"),
    two: require("../../assets/images/icon_运单确认@2x.png"),
    three: require("../../assets/images/状态/运输中@2x.png"),
    four: require("../../assets/images/状态/待签收@2x.png"),
    five: require("../../assets/images/状态/已完成@2x.png"),
}
const headerimgs = ref()
const textstatu = ref()
const textstatu2 = ref()

orderlist.value = orderStore.orderInfo

reqCompanyDetail()
getTitleText(orderlist.value.statusVal)



async function reqCompanyDetail() {
    const res = await getCompanyDetail({
        customerCode: userStore.btsId,
        branchCompanyNo: userStore.btStaff.branchCompanyNo,
    })
    if (res.data.code == 200) {
        arrMsg.value = res.data.data;
        tel.value = arrMsg.value.tel
    }
}

// 获取物流信息文字
function getTitleText(val: string) {
    if (val === '未发货') {
        headerimgs.value = headerimg.one;
        textstatu.value = "未发货";
        textstatu2.value = "请耐心等待发货哦";
    } else if (val === '待确认') {
        headerimgs.value = headerimg.two;
        textstatu.value = "等待运单确认";
        textstatu2.value = "请耐心等待值班员，确认货物信息";
    } else if (val === '运输中') {
        headerimgs.value = headerimg.three;
        textstatu.value = "运输中";
        textstatu2.value = "货物已经在路上，很快就到啦";
    } else if (val === '待签收') {
        headerimgs.value = headerimg.four;
        textstatu.value = "待签收";
        textstatu2.value = "货物正在等你领它回家";
    } else if (val === '已完成') {
        headerimgs.value = headerimg.five;
        textstatu.value = "已完成";
        textstatu2.value = "该运单已经完成服务，感谢使用";
    }
}

function showDetail() {
    visibleMoney.value = true
}
//提货方式过滤
function pickUpModeFilter(index: number) {
    if (index == 1) {
        return "自提";
    } else if (index == 2) {
        return "送货";
    } else if (index == 3) {
        return "直送";
    }
}
//送货类型过滤
function deliveryTypeFilter(index) {
    if (index == 1) {
        return "送商超";
    } else if (index == 2) {
        return "进仓";
    } else if (index == 3) {
        return "报关";
    }
}
//卸货服务过滤
function dischargeServerFilter(index) {
    if (index == 1) {
        return "标准件";
    } else if (index == 2) {
        return "非标准";
    } else if (index == 3) {
        return "特殊件";
    }
}
//返还周期过滤
function returnCycleFilter(index) {
    if (index == 1) {
        return "即日";
    } else if (index == 2) {
        return "三日";
    } else if (index == 3) {
        return "月结";
    }
}
//返还方式过滤
function returnTypeFilter(index) {
    if (index == 1) {
        return "会员";
    } else if (index == 2) {
        return "银行卡";
    } else if (index == 3) {
        return "微信";
    }
}
// 单据服务过滤
function billServerFilter(index) {
    if (index == 1) {
        return "附单据，材料";
    } else if (index == 2) {
        return "承运单";
    } else if (index == 3) {
        return "附厂单，资料";
    }
}
//已支付弹框
function moneyOpen() {

}
//货物信息计算
function allKg() {
    let kg = 0;
    orderlist.value.goodsInfo.forEach((item: any) => {
        kg += item.weigh;
    });
    return kg;
}
function allNumber() {
    let number = 0;
    orderlist.value.goodsInfo.forEach((item: any) => {
        number += item.goodsNumber;
    });
    return number;
}
function allVolume() {
    let Volume = 0;
    orderlist.value.goodsInfo.forEach((item: any) => {
        Volume += item.goodsVolume;
    });
    return Volume;
}
function call() {
    visibleTel.value = true
}

function closeModel() {
    visibleTel.value = false
}
function closeDetailInfo() {
    visibleMoney.value = false
}

//复制
function fuzhiclick(text: string) {
    Taro.setClipboardData({
        data: text,
    }).then(() => {
        Taro.showToast({
            title: '已复制到剪切板',
            icon: 'none'
        })
    })
}

function paid() {
    let cost = 0;
    orderlist.value.costList.forEach((item) => {
        if (item.paid == 1) {
            cost += item.actualMoney * 100;
        } else {
            cost += item.paidMoney * 100;
        }
    });
    return cost / 100;
}

</script>
<style lang="scss">
.detail_contain {
    overflow: auto;
    background-color: #f8f9fa;
    padding: 0 24rpx;
    box-sizing: border-box;

    .flex {
        display: flex;
    }

    .border {
        border-radius: 10rpx;
        margin-top: 16rpx;
    }

    .header {
        width: 700rpx;
        height: 150rpx;
        background-color: #fff;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 32rpx;

        .top_img {
            height: 80rpx;
            width: 80rpx;
        }


        .right {
            margin-left: 32rpx;

            view {
                height: 50%;
            }

            .top {
                font-size: 45rpx;
                font-weight: bold;
            }

            .botto {
                font-size: 20rpx;
                color: #999999;
            }
        }
    }

    .paid {
        height: 112rpx;
        width: 700rpx;
        background-color: #fff;

        padding: 0 36rpx;
        box-sizing: border-box;
    }

    .address_info {
        width: 700rpx;
        height: 336rpx;
        padding: 32rpx 26rpx;
        box-sizing: border-box;
        background-color: #fff;

        image {
            width: 28rpx;
            height: 28rpx;
        }
    }


    .third {
        display: flex;
        margin-bottom: 20rpx;
    }

    .two {
        width: 500rpx;
        height: 100rpx;
        background-color: #f8f9fa;
        border-radius: 100rpx;
        margin-top: 20rpx;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: center;
        align-content: center;

        view {
            line-height: 100rpx;
        }

        view:nth-child(2) {
            font-size: 50rpx;
            font-weight: bold;
            color: #0966ff;
            margin: 0 20rpx;
        }

        view:nth-child(3) {
            font-size: 30rpx;
            color: #999999;
        }

        view:nth-child(1) {
            font-size: 30rpx;
            color: #999999;
        }
    }

    .head {
        padding: 20rpx;
        font-weight: bold;
        font-size: 40rpx;
    }

    .second {
        width: 100%;
        height: 200rpx;
        display: flex;
        padding-top: 20rpx;
        padding-bottom: 20rpx;

        .second-left {
            width: 10%;

            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            margin-top: 0.100rpx;

            view {
                width: 0.100rpx;
                height: 90rpx;
                margin-left: 0.100rpx;
                border-left: 2rpx dashed #999999;
                margin-top: 0.100rpx;
                margin-bottom: 0.100rpx;
            }
        }

        .second-rihgt {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            view {
                .data0 {
                    font-size: 30rpx;
                    display: flex;
                    align-items: center;

                    span {
                        margin-left: 24rpx;
                    }
                }

                .data1 {
                    margin-top: 8rpx;
                    height: 50%;
                    width: 100%;
                    font-size: 20rpx;
                    color: #999999;
                }
            }
        }
    }

    .three {
        width: 710rpx;
        height: 100rpx;
        background-color: #fff;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        font-size: 30rpx;
        font-weight: bold;

        image {
            margin-left: 0.100rpx;
            width: 80rpx;
            height: 80rpx;
        }
    }

    .goods_info {
        width: 700rpx;
        height: 512rpx;
        background-color: #fff;
    }

    .order {
        width: 90%;
        padding-left: 20rpx;
        height: 50rpx;
        margin-bottom: 20rpx;
        display: flex;
        line-height: 50rpx;
        font-size: 30rpx;

        view:nth-child(3) {
            margin-left: 20rpx;
            border: 2rpx solid #666666;
            border-radius: 50rpx;
            padding: 0.100rpx;
            line-height: 30rpx;
            color: #666666;
        }
    }

    .foot {
        font-size: 30rpx;
        font-weight: bold;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .head-two {
        display: flex;
        font-size: 20rpx;
        color: #666666;

        view {
            margin-left: 20rpx;
            display: flex;
        }

        view:nth-child(1),
        view:nth-child(2),
        view:nth-child(3) {
            margin-left: 20rpx;
        }
    }

    .texts {
        width: 670rpx;
        margin: 0 20rpx;
        height: 50rpx;
        display: flex;
        font-size: 20rpx;

        view {
            width: 50%;
            height: 100%;
            line-height: 50rpx;
            display: flex;
        }
    }

    .fuzhuang {
        width: 670rpx;
        margin: 20rpx;
        height: 100rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 30rpx;
        font-weight: bold;
        background-color: #f8f9fa;
        border-radius: 0.100rpx;

        view:nth-child(1) {
            margin-left: 20rpx;
        }

        view:nth-child(2) {
            margin-right: 20rpx;
        }
    }

    .woshixian {
        width: 670rpx;
        margin-left: 20rpx;
        height: 2rpx;
        margin-bottom: 20rpx;
        background: rgba(0, 0, 0, 0.05);
    }

    .tihuome {
        display: flex;
        width: 670rpx;
        height: 70rpx;
        font-size: 30rpx;
        line-height: 70rpx;

        view {
            width: 50%;
            height: 100%;
            margin-left: 20rpx;
        }
    }

    .address {
        width: 100%;
        height: 140rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;

        margin: 30rpx 0;

        .address-right {
            width: 150rpx;
            height: 140rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            .xiushi {
                width: 70rpx;
                height: 70rpx;
                background-color: #f8f9fa;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 70rpx;
            }
        }

        image {
            width: 140rpx;
            height: auto;
            vertical-align: bottom;
        }

        .imgand {
            display: flex;
            margin-left: 20rpx;

            .leftimg {
                width: 270rpx;
                height: 140rpx;
                margin-left: 20rpx;
            }
        }
    }

    .tihuome {
        white-space: nowrap;
    }

    .mark .tihuome view {
        width: 100%;
        white-space: nowrap;
    }

    .copy {
        height: 32rpx;
        margin-left: 20rpx;
        border: 2rpx solid #999999;
        padding: 0 20rpx;
        border-radius: 50rpx;
        text-align: center;
    }

    .foot {
        font-size: 30rpx;
        font-weight: bold;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .red {
        color: #fa5151;
    }

    .blue {
        color: #10aeff;
    }

    .yellow {
        color: #ff8a00;
    }

    .deepBlue {
        color: #0966ff;
    }

    .green {
        color: #07c160;
    }
}
</style>